/*
 * Base Neon Glow Effect
 *
 * This section defines the keyframes for the pulsating glow effect
 * and the base styles for the cyberpunk frame.
 */

:root {
  /* Define Cyberpunk Color Palette */
  --neon-pink: #ff007f;
  --neon-blue: #00ffff;
  --neon-green: #39ff14;
  --neon-purple: #8a2be2;
  --neon-yellow: #ffff00;
  --bg-dark: #121212;
}

/* Keyframes for a subtle, pulsating glow effect */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--neon-color),
                0 0 10px var(--neon-color),
                0 0 20px var(--neon-color),
                0 0 40px var(--neon-color-alt) inset,
                0 0 40px var(--neon-color-alt);
  }
  50% {
    box-shadow: 0 0 2px var(--neon-color),
                0 0 5px var(--neon-color),
                0 0 10px var(--neon-color),
                0 0 20px var(--neon-color-alt) inset,
                0 0 20px var(--neon-color-alt);
  }
}

/* Base style for the glowing frame */
.card-wrapper .card {
  --neon-color: var(--neon-blue); /* Default color */
  --neon-color-alt: rgba(0, 255, 255, 0.4); /* Default alternative for deep glow */
  border: 3px solid var(--neon-color);
  border-radius: 8px; /* Slightly rounded for a modern tech look */
  padding: 10px; /* Space inside the frame */
  background-color: var(--bg-dark);
  transition: all 0.3s ease-in-out;
  animation: neon-pulse 3s infinite alternate; /* Apply base animation */
  display: block; /* Ensure the anchor fills the wrapper */
  text-decoration: none; /* Remove underline from link */
  position: relative;
  z-index: 1; /* To keep it above other elements if needed */
}

/* Enhance the glow effect on hover */
.card-wrapper .card:hover {
  filter: brightness(1.5); /* Make it brighter on hover */
  transform: scale(1.02);
  animation-duration: 1.5s; /* Speed up the pulse on hover */
}

/* Style for the content inside the card */
.card-wrapper .card figure.card-image img {
  width: 100%;
  display: block;
  border: 1px solid var(--neon-color); /* Small inner border for detail */
}

.card-wrapper .card .card-label {
  color: var(--neon-color);
  text-align: center;
  text-shadow: 0 0 5px var(--neon-color);
  margin-top: 5px;
  font-family: 'Press Start 2P', monospace; /* A cyberpunk-style font would be ideal */
}

/*
 * Varying Colors for Cyberpunk Environment
 *
 * This section overrides the CSS variables and animation delay
 * for each card to create the varying colors and staggered pulse effect.
 */

/* Card 1: Pink Pulse (Staggered Delay 0s) */
.card-wrapper:nth-child(1) .card {
  --neon-color: var(--neon-pink);
  --neon-color-alt: rgba(255, 0, 127, 0.4);
  animation-delay: 0s;
}

/* Card 2: Blue Pulse (Staggered Delay 0.5s) */
.card-wrapper:nth-child(2) .card {
  --neon-color: var(--neon-blue);
  --neon-color-alt: rgba(0, 255, 255, 0.4);
  animation-delay: 0.5s;
}

/* Card 3: Green Pulse (Staggered Delay 1s) */
.card-wrapper:nth-child(3) .card {
  --neon-color: var(--neon-green);
  --neon-color-alt: rgba(57, 255, 20, 0.4);
  animation-delay: 1s;
}

/* Card 4: Purple Pulse (Staggered Delay 1.5s) */
.card-wrapper:nth-child(4) .card {
  --neon-color: var(--neon-purple);
  --neon-color-alt: rgba(138, 43, 226, 0.4);
  animation-delay: 1.5s;
}

/* Card 5: Yellow Pulse (Staggered Delay 2s) */
.card-wrapper:nth-child(5) .card {
  --neon-color: var(--neon-yellow);
  --neon-color-alt: rgba(255, 255, 0, 0.4);
  animation-delay: 2s;
}

/* Card 6: Pink Pulse (Staggered Delay 2.5s) */
.card-wrapper:nth-child(6) .card {
  --neon-color: var(--neon-pink);
  --neon-color-alt: rgba(255, 0, 127, 0.4);
  animation-delay: 2.5s;
}

/* Card 7: Blue Pulse (Staggered Delay 3s) */
.card-wrapper:nth-child(7) .card {
  --neon-color: var(--neon-blue);
  --neon-color-alt: rgba(0, 255, 255, 0.4);
  animation-delay: 3s;
}

/* Card 8: Green Pulse (Staggered Delay 3.5s) */
.card-wrapper:nth-child(8) .card {
  --neon-color: var(--neon-green);
  --neon-color-alt: rgba(57, 255, 20, 0.4);
  animation-delay: 3.5s;
}

/* Card 9: Purple Pulse (Staggered Delay 4s) */
.card-wrapper:nth-child(9) .card {
  --neon-color: var(--neon-purple);
  --neon-color-alt: rgba(138, 43, 226, 0.4);
  animation-delay: 4s;
}

/* Card 10: Yellow Pulse (Staggered Delay 4.5s) */
.card-wrapper:nth-child(10) .card {
  --neon-color: var(--neon-yellow);
  --neon-color-alt: rgba(255, 255, 0, 0.4);
  animation-delay: 4.5s;
}

/* Card 11: Pink Pulse (Staggered Delay 5s) */
.card-wrapper:nth-child(11) .card {
  --neon-color: var(--neon-pink);
  --neon-color-alt: rgba(255, 0, 127, 0.4);
  animation-delay: 5s;
}

/* Card 12: Blue Pulse (Staggered Delay 5.5s) */
.card-wrapper:nth-child(12) .card {
  --neon-color: var(--neon-blue);
  --neon-color-alt: rgba(0, 255, 255, 0.4);
  animation-delay: 5.5s;
}

/* Optional: Add a dark, futuristic background to the whole page for context */
body {
  background-color: var(--bg-dark);
  color: #fff;
}